<template>
    <div class="title">
        <div class="check-box">
            <image resize="stretch" class="check-img" :src="shop.midchecked == 1 ? checkedImg : unCheckedImg" @click="checkShop"></image>
        </div>

        <div class="title-left" @click="goToShop">
            <image class="shop-icon" resize="cover" :src="shopIconImg"></image>
            <text class="shop-name">{{shop.sname}}</text>
            <image v-if="hasArrow" class="right-arrow-icon" resize="stretch" :src="rightArrowImg"></image>
        </div>
    </div>
</template>
<style scoped>

.title {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 70px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #fff;
    border-bottom-width: 1px;
    border-color: #f0f0f0;
}
.check-box {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-right: 4px;
}
.check-img {
    width: 35px;
    height: 35px;
}
.title-left {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.shop-icon {
    width: 30px;
    height: 30px;
    margin-right: 4px;
}
.shop-name {
    font-size: 26px;
    color: #313131;
    font-family: msyhl;
}
.right-arrow-icon {
    width: 36px;
    height: 36px;
    margin-left: 4px;
}
</style>
<script>
    import shopIconImg from 'assets/images/shop-ico.png';
    import rightArrowImg from 'assets/images/right-arrow.png';
    import checkedImg from 'assets/images/checked-circle.png';
    import unCheckedImg from 'assets/images/unchecked-circle.png';
    import navigator from "utils/navigator";
    import route from 'constants/route';

    export default{
        props: {
            shop: {
                type: Object,
                default:{},
                required: true
            },
            hasArrow: {
                type: Boolean,
                default: true
            }
        },
        data(){
            return{
                shopIconImg: shopIconImg,
                rightArrowImg: rightArrowImg,
                checkedImg: checkedImg,
                unCheckedImg: unCheckedImg
            }
        },
        methods: {
            checkShop(){
                let goodsList = this.shop.goods || [];
                let strArray = [];
                for(let g in goodsList){
                    let goods = goodsList[g];
                    let str = goods.id + '_' + goods.cart_num + '_';
                    if(this.shop.midchecked == 0) str = str + 1;
                    else str = str + 0;
                    strArray.push(str);
                }
                let goodsStr = strArray.join('=');
                this.$emit('checkShop', goodsStr);
            },
            goToShop(){
                if(!this.hasArrow) return false;

                navigator.pop();//关闭当前购物车页面

                if(this.shop.shoptype){ //大店铺shoptype
                    let _options = {
                        url: route.shop_index,
                        title: this.shop.sname || "商家店铺",
                        params: {
                            shopType: this.shop.shoptype
                        }
                    };
                    navigator.push(_options);
                } else {  //小店铺sid
                    let _options = {
                        url: route.shop_plus,
                        title: this.shop.sname || "店铺详情",
                        params: {
                            sid: this.shop.sid
                        }
                    };
                    navigator.push(_options);
                }
            }
        }
    }
</script>
